<template>
    <div :class="data.myStyle.containerStyle">
        <div class="relative">
            <div :class="data.myStyle.iconStyle"></div>
            <input
                :ref="inputRef"
                :class="data.myStyle.inputStyle"
                type="text"
                :placeholder="data.placeHolder"
                v-model.trim="search.inputData"
            />
        </div>
        <div
            v-show="hasResult"
            :class="search.inputData || search.flag ? 'opacity-100 2xl:h-64 xl:h-56 lg:h-48' : 'opacity-0 h-0'"
            class="w-full transition-opacity absolute rounded rounded-t-none bg-white md:py-5 py-1 md:px-5 px-2"
        >
            <div v-if="(search.inputData || search.flag) && search.searchData.length !== 0">
                <div class="px-3 text-gray-400 z-50 tracking-widest md:text-sm text-xs">查询结果</div>
                <div class="px-7">
                    <router-link
                        :to="item.to"
                        v-for="item in search.searchData"
                        class="xl:mt-3 mt-1 2xl:py-1 py-0.5 px-3 text-gray-400 flex hover:bg-gray-200 hover:text-black items-center text-xs md:text-base"
                    >{{ item.title }}</router-link>
                </div>
            </div>
            <div v-else>
                <div class="px-3 text-gray-400 tracking-widest md:text-base text-xs">快速链接</div>
                <div class="px-7">
                    <router-link
                        v-for="item in state.hotData"
                        class="xl:mt-3 mt-1 2xl:py-1 py-0.5 px-3 text-gray-400 flex hover:bg-gray-200 hover:text-black items-center text-xs md:text-base"
                        :to="item.to"
                    >{{ item.title }}</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, onMounted, watchEffect } from "vue";
import { search, state } from "@utils/store";
import { searchMethod } from "@utils/utils";


let input: HTMLInputElement
const inputRef = (el: HTMLInputElement) => {
    input = el
    return ref(el)
}

onMounted(() => {
    searchMethod(input)
})

watchEffect(()=> {
    if(search.inputData === '') {
        search.searchData = []
        search.lock = true
    }
})




const data = defineProps({
    placeHolder: {
        type: String,
        default: '请输入文字'
    },
    hasResult: {
        type: Boolean,
        default: true
    },
    myStyle: {
        type: Object,
        default: {
            containerStyle: 'relative mb-20  ',
            iconStyle: 'bg-small-search lg:w-9 lg:h-9 md:h-7 md:w-7 w-5 h-5 bg-no-repeat lg:mt-1 mt-0.5 ml-3 bg-center bg-contain absolute top-1/2 transform -translate-y-1/2',
            inputStyle: 'lg:h-14 md:h-10 h-8 md:rounded-md rounded-sm lg:w-750 md:w-450 w-296  md:pl-14 pl-10 lg:text-2xl md:text-xl text-base outline-none tracking-wider text-gray-700 border-2'
        }
    }
})
</script>